<template>
  <!-- <div class="content-box">
  <common-header :title="title" ></common-header>-->
  <div class="page-content">
    <div class="payDetails">
      <div class="title">选择银行卡</div>
      <div class="text">
        <p >{{bank.bankname}}</p>
      </div>
    </div>
    <div class="payDetails">
      <div class="title">可提现额度</div>
      <div class="text">
        <p>{{amount_total|moeny("¥")}}元</p>
      </div>
    </div>
    <!-- <van-popup v-model="pickerVisible" position="bottom">
      <van-picker
        show-toolbar
        :defaultIndex="0"
        :columns="pickData"
        @cancel="pickerVisible = false"
        @confirm="onConfirm"
      />
    </van-popup> -->
    <!-- <div class="payDetails">
        <div class="title">提现金额</div>
        <div class="text">
          <input type="text" placeholder="请输入提现金额" v-model="amount" class="amount" />
          <span class="allAmount" >全部提现</span>
        </div>
    </div>-->
    <van-field
      v-model="amount"
      type="number"
      clearable
      label="提现金额"
      placeholder="请输入提现金额"
      input-align="right"
      required
      :error-message="amountMessage"
      error-message-align="right"
    >
      <van-button slot="button" size="small" type="warning" @click="allAmount">全部提现</van-button>
    </van-field>
    <van-field
      v-model="payPassword"
      type="password"
      label="支付密码"
      clearable
      placeholder="请输入支付密码"
      :error-message="payPasswordMessage"
      error-message-align="right"
      input-align="right"
      required
    />
    <div class="btnPay" @click="finish()">申请提现</div>
  
    <commonFooter></commonFooter>
  </div>

</template>
<script>
import { commonFooter } from "common";
import { takeTobankApi } from "@/api/user";
import { indexInitApi } from "@/api";
import { integer } from "@/utils/regRex";
import { createNamespacedHelpers } from "vuex";
import { WEB_QQ, WEB_TEL } from "@/store/mutation-types";
let { mapGetters } = createNamespacedHelpers("user");
export default {
  name: "withdrawal",
  components: {
    commonFooter
  },
  computed: {
    ...mapGetters(["bank", "amount_total"])
  },
  destroyed() {
    this.amount = "";
    this.payPassword = "";
  },
  mounted() {
    this.webqq = this.$ls.get(WEB_QQ);
    this.webtel = this.$ls.get(WEB_TEL);
    if (!this.webqq || !this.webtel) {
      this.$store.dispatch('GET_CONF').then(res => {
        this.webqq = res.data.conf.webqq;
        this.webtel = res.data.conf.webtel;
      });
    } 
  },
  methods: {

    show() {
      this.pickerVisible = true;
    },
    allAmount() {
      this.amount = parseInt(this.amount_total);
    },
    finish() {
      this.amountMessage = "";
      this.payPasswordMessage = "";

      if (!this.payPassword) {
        this.payPasswordMessage = "请输入支付密码";
      }
      if (!this.amount) {
        this.amountMessage = "请输入提款金额";
      } else if (!integer.test(this.amount)) {
        this.amountMessage = "提款金额只能为正整数";
      } else if (this.amount > parseInt(this.amount_total)) {
        this.amountMessage = "提款金额不能大于用户额度";
      } else if (this.payPassword) {
        takeTobankApi({
          amount: this.amount,
          paypwd: this.payPassword
        }).then(res => {
          this.$toast({
            message: res.msg,
            duration: 500,
            onClose: () => {
              if (res.code == 200) {
                this.$router.go(-1);
              }
            }
          });
        });
      }
    }
  },
  data() {
    return {
      title: "我要提现",
      amountMessage: "",
      payPasswordMessage: "",
      pickData: [],
      pickerValue: "",
      pickerVisible: false,
      amount: "",
      payPassword: "",
      bankUserNam: "",
      bankName: "",
      bankCardNum: "",
      bankPosition: "",
      webqq: "",
      webtel: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/mixin.less";
@import "~styles/variable.less";
.customer {
  .tc();
  a {
    margin: 0.5rem;
    color: @base-color;
  }
}
.amount {
  width: 75% !important;
  float: left;
}
.allAmount {
  width: 25%;
  float: left;
  font-size: 0.3rem !important;
  color: @orange-color;
}
</style>